<template xmlns:v="http://www.w3.org/1999/html">
  <section class="main">
    <h3 class="nametitle">{{title}}</h3>
    <div class="searchlist pcTime">
      <ul>
        <li class="form-group ">
          <label class="control-label">时间：</label>
          <div class="control-box">
            <el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                            unlink-panels
                            :picker-options="pickerOptions2"
                            end-placeholder="结束日期" value-format="yyyy-MM-dd">>
            </el-date-picker>
          </div>
        </li>
        <button type="button" class="button-primary" @click="search()">搜索</button>
      </ul>
    </div>
    <div class="searchlist mobile_time">
      <ul>
        <li>
          <label class="control-label">开始时间：</label>
          <div class="control-box">
            <div class="el-date-editor el-add-box">
              <i class="el-input__icon el-range__icon el-icon-date"></i>
              <input type="text" class="text" readonly v-model="mobileSearchTime.searchTime2" placeholder="开始时间" @click="changeMobile1"/>
              <calendar
                v-model="mobileSearchTime.calendarShow"
                @change="handelChange">
              </calendar>
            </div>
          </div>
        </li>
        <li>
          <label class="control-label">结束时间：</label>
          <div class="control-box">
            <div class="el-date-editor el-add-box">
              <i class="el-input__icon el-range__icon el-icon-date"></i>
              <input type="text" class="text" readonly v-model="mobileSearchTime2.searchTime2" placeholder="结束时间"  @click="changeMobile2"/>
              <calendar
                v-model="mobileSearchTime2.calendarShow"
                @change="handelChange2">
              </calendar>
            </div>
          </div>
        </li>
      </ul>
      <button type="button" class="button-primary" @click="search()">搜索</button>
    </div>
    <aside class="main_table">
      <table class="table" border="1" bordercolor="#e5e5e5">
        <thead>
        <tr>
          <th width="10.7%" class="notclick">序号</th>
          <th width="10.8%"  @click="sort('typeName','1')" :class="sortClass=='1' ? 'addSorc' : (sortClass=='1_1' ? 'subSorc' : '')">类型</th>
          <th width="15%" @click="sort('applyDate','2')" :class="sortClass=='2' ? 'addSorc' : (sortClass=='2_1' ? 'subSorc' : '')">申请时间</th>
          <!--<th width="10.8%">申请人</th>-->
          <th width="18.3%" @click="sort('name','3')" :class="sortClass=='3' ? 'addSorc' : (sortClass=='3_1' ? 'subSorc' : '')">软著名称</th>
          <th width="18%" @click="sort('appyNum','4')" :class="sortClass=='4' ? 'addSorc' : (sortClass=='4_1' ? 'subSorc' : '')">登记号</th>
          <th width="15%" @click="sort('registrationDate','5')" :class="sortClass=='5' ? 'addSorc' : (sortClass=='5_1' ? 'subSorc' : '')">登记日</th>
          <th width="12.2%" @click="sort('statusName','6')" :class="sortClass=='6' ? 'addSorc' : (sortClass=='6_1' ? 'subSorc' : '')">状态</th>
        </tr>
        </thead>
        <tbody v-if="tableDate && tableDate.length>0">
        <tr v-for="(item,index) in tableDate">
          <td>{{(pageSize*(pageNumber-1))+(index+1)}}</td>
          <td>{{item.typeName}}</td>
          <td>{{item.applyDate | formatDate}}</td>
          <!--<td>{{item.applyName}}</td>-->
          <td>{{item.name}}</td>
          <td>{{item.appyNum}}</td>
          <td>{{item.registrationDate | formatDate}}</td>
          <td>{{item.statusName}}</td>
        </tr>
        </tbody>
        <tbody v-else>
        <tr>
          <td colspan="8" class="textleft">暂无数据</td>
        </tr>
        </tbody>
      </table>
    </aside>
    <div v-show="allPageSize>1">
      <mo-pages :page-index="pageNumber" :total="total" :page-size="pageSize" @change="pageChange"></mo-pages>
    </div>
  </section>
</template>

<script>
  import moPages from "@/components/pages"
  export default{
    components:{
      moPages:moPages,

    },
    data (){
      return {
        title: "软著",
        pageNumber: 1,
        pageSize: 10,
        total: '',//总的条数
        tableDate: [],
        allPageSize: '',
        searchTime: '',
        mobileSearchTime: {
          searchTime2: "",
          calendarShow: false,
        },
        mobileSearchTime2: {
          searchTime2: "",
          calendarShow: false,
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        sortOrder:'asc',
        sortName:'typeName',
        sortClass:"1",
      }

    },
    filters:{
      formatDate:function(value){
        if(value!=null && value!=''){
          if(value.indexOf(' ')!=-1){
            value=value.split(" ")[0];
          }
        }
        return value;
      }
    },
    created(){
      this.setTitle();
      this.setActive();
      this.getList();
    },
    methods:{
      setTitle(){
        //设置上面的标题
        this.$emit("getTitle",this.title);
      },
      setActive(){
        //设置左侧的菜单高亮
        this.$root.Bus.$emit("nowActive","07")
      },
      getList(startTime,endTime){
        if(!startTime) startTime='';
        if(!endTime)  endTime='';
        this.$ajax.get(this.global.url+"/api/user/softList?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&startTime="+startTime+"&endTime="+endTime+"&sortname="+this.sortName+"&sortOrder="+this.sortOrder).then(res=>{
          let data=res.data;
          this.tableDate=[];
          if(data.code=="0"){
            if(data.data && data.data.records){
              this.tableDate=data.data.records;
            }
            this.total=data.data.total;
            this.allPageSize=data.data.pages;
          }
          else{
            this.total=0;
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      pageChange(page){
        this.pageNumber=page;
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }
      },
      search(){
        this.pageNumber=1;
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }

      },
      handelChange(data,formatDate){
        this.mobileSearchTime.searchTime2=formatDate;

      },
      handelChange2(data,formatDate){
        this.mobileSearchTime2.searchTime2=formatDate;
      },
      changeMobile1(){
        this.mobileSearchTime.calendarShow=true;
      },
      changeMobile2(){
        this.mobileSearchTime2.calendarShow=true;
      },
      sort(sortname,num){
        console.log(sortname);
        if(this.sortName==sortname){
          if(this.sortOrder=='asc'){
            this.sortOrder='desc';
            this.sortClass=num+'_1';
          }
          else{
            this.sortOrder='asc';
            this.sortClass=num;
          }
        }
        else{
          this.sortName=sortname;
          this.sortOrder='asc';
          this.sortClass=num;
        }
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }

      }
    }
  }
</script>

<style scoped>
  .main{
    padding:1.5rem 7% 1.5rem 7%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .main .title{
    font-size:1rem;
    line-height: 30px;
    text-align: center;
    color:#53306c;
    margin-bottom:2.4rem;
  }
  .step{
    width:100%;
    margin-bottom: 2.1rem;
  }
  .step img{
    width:100%;
  }
  .main_table{
    width:100%;
    overflow: auto;
    margin-bottom:1rem;
  }
  .table{
    width:100%;
    min-width:1000px;
    text-align:center;
    border-collapse:collapse;
    border-spacing:0;
    background: #fff;
    font-size: 14px;
  }
  .table thead th{
    background-color: #53306c;
    color:#fff;
    padding:0.75rem 1rem;
    line-height: 22px;
    font-weight: normal;
    /*height: 64px;*/
    cursor: pointer;
    background-position: 95% center;
    background-repeat: no-repeat;
  }
  .table thead th.notclick{
    cursor: default;
  }
  .table thead .addSorc{
    /*background: url("../../assets/asc.png") no-repeat 95% center;*/
    background-image:url("../../assets/asc.png");
    background-size:32px auto;
  }
  .table thead .subSorc{
    background-image:url("../../assets/desc.png");
    background-size:32px auto;
  }
  .table tbody tr{
    cursor: pointer;
  }
  .table tbody td{
    color:#333333;
    /*height: 64px;*/
    padding:0.75rem 1rem;
    line-height: 22px;
    word-break:break-all;
  }
  .nametitle{
    font-size: 1.5rem;
    color:#53306c;
    text-align: center;
    line-height: 2.5rem;
    margin-bottom: 1.5rem;
    margin-top:1.5rem;
    display: none;
  }
/*2018-12-17新添加样式 start*/
  .searchlist{
    margin-bottom: 0.5rem;
  }
  .searchlist ul{
    overflow: hidden;
    width:100%;
  }
  .searchlist li{
    /*width:25%;*/
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    float: left;
    margin-right: 0.5rem;
  }
  .searchlist li .control-label{
    margin-right: 10px;
  }
  .searchlist li .control-box{
    -webkit-flex:1;
    -moz-flex:1;
    -ms-flex:1;
    -o-flex:1;
    flex:1;
  }
  .searchlist .button-primary{
    font-size: 0.7rem;
    color: #fff;
    background: #53306c;
    padding: 0 1rem;
    border: none;
    border-radius: 4px;
    line-height: 2rem;
    height: 2rem;
    overflow: hidden;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
  }
  .searchlist .button-primary:focus{
    border: none;
    outline: none;
  }
  .el-add-box{
    background: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3px 10px;
    position: initial !important;
    width:100%;
  }
  .el-add-box input{
    height:1.6rem;
    line-height: 1.6rem;
    font-size: 0.7rem;
    text-align: center;
    border: none;
    padding:0px;
    margin:0px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex:1;
  }

 .control-box >>> .el-date-editor .el-range-separator{
    width:auto !important;
  }
  .mobile_time{
   display: none;
 }
  .mobile_time li{
    width:100%;
    float: none;
    margin-bottom: 15px;
  }
  .mobile_time .button-primary{
    display: block;
    margin: 0 auto;
  }
  /*2018-12-17新添加样式 end*/
  @media only screen and (min-width:960px) and (max-width:1440px){
    .main{
      padding:1.5rem 2rem;
    }
  }
  @media only screen and (min-width: 320px) and (max-width: 959px) {
    .main{
      padding: 0px 1.5rem 1.5rem 1.5rem;
    }
    .nametitle{
      display: block;
    }
    /*2018-12-17新添加样式 start*/
    .mobile_time{
      display: block;
    }
    .pcTime{
      display: none;
    }
    .table tbody .textleft{
      text-align: left;
    }
    /*2018-12-17新添加样式 end*/
  }
</style>
